<template>
  <div class="app-portal-container" v-jloading="loading">
    <div class="app-mgr-group">
      <div class="app-mgr-header">
        <span class="app-mgr-title">应用中心</span>
        <span class="app-mgr-desc ml-2.5">点击应用进入内容管理。</span>
      </div>
      <el-radio-group v-model="showMode">
        <el-radio-button label="all">
          <div class="flex items-center">
            <JIcon :icon="DFT_ICONS.layoutFluid" class="mr-1" />
            <span>分组应用</span>
          </div>
        </el-radio-button>
        <el-radio-button label="app">
          <div class="flex items-center">
            <JIcon :icon="DFT_ICONS.app" class="mr-1" />
            <span>仅应用</span>
          </div>
        </el-radio-button>
        <el-radio-button label="group">
          <div class="flex items-center">
            <JIcon :icon="DFT_ICONS.formview" class="mr-1" />
            <span>仅分组</span>
          </div>
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="app-mgr-container" :class="`app-mode-${ showMode }`">
      <template v-if="showMode === 'all' || showMode === 'group'">
        <template v-for="g in appGroups">
          <div
            class="app-box w-full wbox-container"
            :key="`g_${g.group_id}`"
            v-if="$menuUtils.isGroup(g) || $menuUtils.isAppGroup(g)"
          >
            <div
              v-if="showMode === 'all' || (showMode === 'group' && g.group_id > 0)"
              class="app-box-head">
              <div class="app-box-title" v-text="g.group_name"></div>
              <template v-if="g.group_id > 0">
                <el-button
                  size="small"
                  type="text"
                  class="ml-3"
                  @click="handleGroupEdit(g)"
                >
                  <template #icon>
                    <JIcon :icon="DFT_ICONS.edit"/>
                  </template>修改
                </el-button>
                <span></span>
                <el-button
                  size="small"
                  type="text"
                  style="margin-left: -10px;"
                  @click="handleGroupRemove(g)"
                >
                  <template #icon>
                    <JIcon :icon="DFT_ICONS.delete"/>
                  </template>删除
                </el-button>
              </template>
            </div>
            <div
              v-if="showMode === 'all'"
              class="app-box-body"
            >
              <div
                v-for="app in g.subs"
                v-resp="{ type: 'c12', container: 'parent', smc: 6, mdc: 4, lgc: 3 }"
              >
                <AppsMgrInfo :app="app" @edit="handleEdit" @remove="handleRemove" />
              </div>
              <div v-resp="{ type: 'c12', container: 'parent', smc: 6, mdc: 4, lgc: 3 }" key="gNew">
                <AppsMgrInfo :is-create="true" @create="handleCreateApp(g)" />
              </div>
            </div>
          </div>
        </template>
        <div class="app-group-create flex justify-center items-center">
          <el-button
            size="small"
            type="text"
            class="ml-3"
            @click="handleGroupCreate()"
          >
            <template #icon>
              <JIcon :icon="DFT_ICONS.add"/>
            </template>应用分组
          </el-button>
        </div>
      </template>
      <template v-else>
        <div
          v-for="app in apps"
          v-resp="{ type: 'c12', container: 'parent', smc: 6, mdc: 4, lgc: 3 }"
          :key="`a_${app.content_id}`"
        >
          <AppsMgrInfo :app="app" @edit="handleEdit" @remove="handleRemove" />
        </div>
        <div v-resp="{ type: 'c12', container: 'parent', smc: 6, mdc: 4, lgc: 3 }" key="xNew">
          <AppsMgrInfo :is-create="true" @create="handleCreateApp()" />
        </div>
      </template>
    </div>

    <el-dialog v-model="appSyncShow" :title="appSyncWinName" width="600">
      <app-sync :app="app" />
    </el-dialog>
    <el-dialog
      v-model="appFormShow"
      top="5vh"
      :title="appFormWinName"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <FormApp
        v-if="appFormShow"
        :action-type="actionType"
        :current-data="app"
        :parent-group-id="parentGroupId"
        @success="handleAppEditSuccess"
        @cancel="handleAppEditCancel"
      />
    </el-dialog>
    <el-dialog
      v-model="groupFormShow"
      top="5vh"
      :title="groupFormWinName"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <FormGroup
        v-if="groupFormShow"
        :action-type="actionType"
        :current-data="group"
        @success="handleGroupEditSuccess"
        @cancel="handleGroupEditCancel"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import _ from 'lodash';
// import appsCore from './apps-core';
import appSync from './app-sync.vue';
import FormApp from '../basic/menus/form-app.vue';
import FormGroup from '../basic/menus/form-group.vue';
import AppsMgrInfo from './apps-mgr-info.vue';
import { $menuUtils } from '@jzl/utils';
import { api } from '@jzl/api';
import { useRoute } from 'vue-router';
import { DFT_ICONS } from '@jzl/icons';
import useApps from './hooks/useApps.js';

const route = useRoute();
const app = ref(null);
const group = ref(null);

const appFormShow = ref(false);
const appFormWinName = ref('修改应用');
const appSyncShow = ref(false);
const appSyncWinName = ref('同步应用');
const groupFormShow = ref(false);
const groupFormWinName = ref('修改分组');

const actionType = ref('edit');
const parentGroupId = ref(null);
// const appGroups = ref([]);
// const apps = ref([]);
// const isShowGroup = ref(false);
const showMode = ref('all');  // all | app | group

const { loading, apps, appGroups, loadApps } = useApps();

const handleEdit = (appData) => {
  // console.log(appData)
  actionType.value = 'edit';
  app.value = appData;
  appFormWinName.value = `修改应用【${_.get(app.value, 'group_name')}】`;
  appFormShow.value = true;
};

const handleCreateApp = (g) => {
  actionType.value = 'createApp';
  app.value = null;
  parentGroupId.value = _.get(g, 'group_id');
  appFormShow.value = true;
  appFormWinName.value = `新增应用`;
};

const handleRemove = (appData) => {
  app.value = appData;
  // appFormShow.value = true;

  let msg = `确定删除应用【${_.get(app.value, 'group_name')}】?`;
  $jui.confirm(msg, '提示').then(async () => {
    let ret = await api.group.removeGroup(app.value.group_id);

    if (ret) {
      app.value = null;
      await loadApps();
    }
  });
};

const handleAppEditSuccess = async () => {
  appFormShow.value = false;

  // let gid = _.get(app.value, 'group_id');
  // if (!gid) return;
  // app.value = await api.group.getGroup(gid);
  await loadApps();
};

const handleAppEditCancel = () => {
  appFormShow.value = false;
};

// group
const handleGroupEdit = (groupData) => {
  actionType.value = 'edit';
  group.value = groupData;
  groupFormWinName.value = `修改应用分组【${_.get(groupData, 'group_name')}】`;
  groupFormShow.value = true;
};

const handleGroupCreate = () => {
  actionType.value = 'createAppGroup';
  group.value = null;
  // parentGroupId.value = _.get(g, 'group_id');
  groupFormShow.value = true;
  groupFormWinName.value = `新增应用分组`;
};

const handleGroupRemove = (groupData) => {
  group.value = groupData;
  // appFormShow.value = true;

  let msg = `确定删除应用分组【${_.get(group.value, 'group_name')}]?`;
  $jui.confirm(msg, '提示').then(async () => {
    let ret = await api.group.removeGroup(group.value.group_id);

    if (ret) {
      group.value = null;
      await loadApps();
    }
  });
};

const handleGroupEditSuccess = async () => {
  groupFormShow.value = false;

  // let gid = _.get(group.value, 'group_id');
  // if (!gid) return;
  // group.value = await api.group.getGroup(gid);
  await loadApps();
};

const handleGroupEditCancel = () => {
  groupFormShow.value = false;
};

watch(
  () => route,
  () => {
    loadApps();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.app-portal-container {
  flex-flow: column;
}
.app-mgr {
  &-group {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-header {
    display: flex;
    align-items: baseline;
  }
  &-title {
    font-size: 24px;
    color: var(--j-text-color-primary);
  }
  &-desc {
    font-size: var(--j-font-size-medium);
    color: var(--j-text-color-secondary);
  }
}
.app-mgr-container {
  width: 100%;
  height: 100%;
  align-content: flex-start;
  overflow-y: auto;
}

.app-mode-group .app-group-create,
.app-mode-group .app-box-head {
  background: #FFF;
  border-radius: 10px;
  margin: 0 10px;
  padding: 10px;
  color: var(--j-text-color-regular);
  cursor: pointer;
  border: 1px solid #FFF;
  transition: all .2s;

  &:hover {
    box-shadow: 0 0 5px var(--j-border-color);
    border-color: var(--j-border-color-dark);
  }
}

</style>
